<template>
  <div class="b-tunnel">
    <div class="devices-icon" v-show="showBox">
      <span class="iconfont icon-gongzuomian"></span>
      {{ info.name }}
    </div>

    <div class="devices-body" @mousedown="showTunnelDialog">
      <div class="devices-body-name">
        {{ info.name }}
      </div>
      <div class="devices-content">
        <div class="flex-row" v-for="index in Math.floor(infoList.length / 2)"
          :key="index">
          <div class="flex-col" v-for="node in infoList.slice((index - 1) * 2, (index - 1) * 2 + 2)"
            :key="node.value">
            <div class="flex-title">{{ node.title(tunnel.workType) }}：</div>
            <div class="flex-value">
              {{ tunnel[node.value] || '--' }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="device-line"></div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useDialog } from '@/hooks/useDialog'
import RoadDetail from '@/views/DataView/road/roadDetail/roadDetail.vue'
import { useActiveObject } from '@/store/activeObject';
import { storeToRefs } from 'pinia';
import { getAreaIdByTunnelId, getAreaList } from '@/api/road';

const props = defineProps({
  info: {
    type: Object,
    reqiured: true
  }
})

const tunnel = ref({})

onMounted(async () => {
    const {data: areaId} = await getAreaIdByTunnelId(props.info.uuid)
    const { data } = await getAreaList({ areaId })
    tunnel.value = data[0]
})



const infoList = [
  {
    title: () => '工作面类型',
    value: 'workType'
  },
  {
    title: () => '工作面状态',
    value: 'currentStatusName'
  },
  {
    title: (workType: string) => (workType === '采面' ? '采煤工艺' : '掘进方法'),
    value: 'workMothod'
  },
  {
    title: () => '所属煤层',
    value: 'coalSeamName'
  },
  {
    title: () => '支护方式',
    value: 'methodType'
  },
  {
    title: () => '智能化工作面',
    value: 'isIntelligentWorkFaceName'
  },
  {
    title: () => '单班定员(人)',
    value: 'workNum'
  },
  {
    title: (workType: string) => (workType === '采面' ? '初始回采' : '初始掘进'),
    value: 'initWorkDate'
  },
  {
    title: (workType: string) => (workType === '采面' ? '走向长度(m)' : '设计长度(m)'),
    value: 'designLen'
  },
  {
    title: (workType: string) => (workType === '采面' ? '累计总推进(m)' : '累计总进尺(m)'),
    value: 'accruedAllFootage'
  },
  {
    title: (workType: string) => (workType === '采面' ? '工作面进度' : '巷道进度'),
    value: 'finish'
  }
]

const activeObjectStore = useActiveObject()
const { activeFilter, isHistoryTracking } = storeToRefs(activeObjectStore)
const showBox = computed(() => {
  return activeFilter.value.includes('workArea') && !isHistoryTracking.value
})

const { openDialog } = useDialog()
function showTunnelDialog () {
  openDialog(tunnel.value.areaName, RoadDetail, { ...tunnel.value, active: '1' }, {
    width: 950,
    height: 400
  })
}
</script>
<style scoped lang="scss">
.b-tunnel {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease-in-out;

  .devices-icon {
    pointer-events: all;
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(8px * var(--viewScale));
    background: hsl(162deg 93% 38% / 20%);
    padding: calc(8px * var(--viewScale));
    border-radius: calc(22px * var(--viewScale));
    font-size: calc(14px * var(--viewScale));

    .icon-gongzuomian {
      position: relative;
      font-size: 12px;
      width: 18px;
      height: 18px;
      line-height: 18px;
      color: #00bcd4;
    }
  }

  &:hover {
    opacity: 1;
    z-index: 9999 !important;
  }

  &:hover .devices-icon {
    font-size: 18px;
  }

  &:hover .devices-body {
    display: flex;
  }

  .devices-body {
    display: none;
    flex-direction: column;
    position: absolute;
    top: -16px;
    left: 50%;
    border-radius: 4px;
    z-index: 2;
    transform: translate(-50%, -100%);
    white-space: nowrap;
    background: #03b87a80;
    font-size: 12px;
    box-shadow: 0 0 5px #000;

    &.active {
      display: flex;
    }

    .devices-body-name {
      color: var(--text-color);
      background-color: rgb(0, 147, 96);
      padding: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .devices-content {
      display: flex;
      flex-direction: column;
      gap: 4px;
      pointer-events: all;
      padding: 8px;

      .flex-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        gap: 4px;
        .flex-col {
          width: 50%;
          text-align: right;
          display: flex;
          justify-content: space-between;
          color: var(--text-color-disabled);
          align-items: center;
          margin-bottom: 8px;

          .flex-title {
            text-align: right;
          }

          .flex-value {
            flex: 1;
            text-align: left;
            color: var(--el-color-primary);
          }
        }
      }
    }
  }

  &:hover .device-line {
    display: block;
  }

  .device-line {
    display: none;
    position: absolute;
    top: -16px;
    left: calc(50% - 12px);
    height: 16px;
    width: 24px;
    padding: 4px 10px;
    border-radius: 50px;
    background: linear-gradient(180.00deg, rgba(0, 255, 167, 0.97), rgba(0, 247, 189, 0) 100%);
    background-clip: content-box;

    &.active {
      display: block;
    }
  }
}

.success {
  color: var(--el-color-success);
}

.error {
  color: var(--el-color-danger);
}

.warning {
  color: var(--el-color-warning);
}

.icon-jizhan {
  color: #1affb2;
}

.icon-shebeichuanganqi {
  color: #fce310;
}

.icon-shexiangtou {
  color: #55ffef;
}

@keyframes col {
  0% {
    color: var(--el-color-danger);
    transform: scale(1);
    opacity: 1;
  }

  100% {
    color: var(--el-color-danger-light-8);
    transform: scale(3.5);
    opacity: 0;
  }
}
</style>
